<template>
    <div class="list">
        <ul>
          <li v-for="item in lists" :id="item.code" :key="item.code" draggable="true" @dragstart="onDragStart">
          {{ item.name }}</li>
        </ul>
      </div>
</template>
<script setup>
import {ref} from 'vue'
const lists = ref([
    { code: 'antChartLine', name: '折线图' },
    { code: 2, name: '扇形图' },
    { code: 3, name: 'Project 3' }
])
const onDragStart = (ev) => {
  console.log(ev)
	ev.dataTransfer.setData("compoentId",ev.target.id);
}

</script>
<style lang="scss" scoped>
.list {
    // border: 1px solid red;
    padding: 5px 0;
}
ul{
  padding: 0;
  li{
    margin-bottom: 10px;
    list-style: none;
    padding: 0 5px;
  }
}

li:hover{
  background: skyblue;
  
}
</style>